<template>
	<view>
		<uni-row class="demo-uni-row" style="margin-bottom: 15px" :gutter="26" v-for="(item, index) in button01Arr"
			:key="index">
			<uni-col :span="6" v-for="(val, i) in item.button01Name" :key="i">
				<button :class="buttons01[val.no].isActive ? 'buttonActive01' : 'buttonNoActive01'"
					@click="changeType(val.no, val.name)">
					<text class="buttontext">{{ val.name }}</text>
				</button>
			</uni-col>
		</uni-row>

		<view v-show="flag">
			<uni-row>
				<uni-col :span="8">
					<button @click="changeButtons(0, '形态组合')"
						:class="buttons02[0].isState ? 'buttonActive02' : 'buttonNoActive02'">形态组合</button>
				</uni-col>
				<uni-col :span="8">
					<button @click="changeButtons(1, '单选间隔')"
						:class="buttons02[1].isState ? 'buttonActive02' : 'buttonNoActive02'">单选间隔</button>
				</uni-col>
				<uni-col :span="8">
					<button @click="changeButtons(2, '散连对')"
						:class="buttons02[2].isState ? 'buttonActive02' : 'buttonNoActive02'">散连对</button>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="8">
					<button @click="changeButtons(3, '重邻弧')"
						:class="buttons02[3].isState ? 'buttonActive02' : 'buttonNoActive02'">重邻弧</button>
				</uni-col>
				<uni-col :span="8">
					<button @click="changeButtons(4, '复隔中')"
						:class="buttons02[4].isState ? 'buttonActive02' : 'buttonNoActive02'">复隔中</button>
				</uni-col>
				<uni-col :span="8">
					<button @click="changeButtons(5, '热温中')"
						:class="buttons02[5].isState ? 'buttonActive02' : 'buttonNoActive02'">热温中</button>
				</uni-col>
			</uni-row>
		</view>

		<uni-section class="biaoti" title="图表展示期数">
			<uni-row>
				<uni-col :span="5" class="zidingyi">自定义期数</uni-col>
				<uni-col :span="4">
					<uni-data-select :localdata="qiShu" @change="changeFirst" :clear="false"></uni-data-select>
				</uni-col>
				<uni-col :span="2" class="fuhao">~</uni-col>
				<uni-col :span="4">
					<uni-data-select :localdata="qiShu" @change="changeSecond" :clear="false"></uni-data-select>
				</uni-col>
				<uni-col :span="8">
					<button :class="state ? 'buttonActive02' : 'buttonNoActive02'" @click="ziDingYiQiShu">确定</button>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="6">
					<button class="buttonthirty" @click="anNiuQiShu(30)">30期</button>
				</uni-col>
				<uni-col :span="6">
					<button class="buttonthirty" @click="anNiuQiShu(100)">100期</button>
				</uni-col>
				<uni-col :span="6">
					<button class="buttonthirty" @click="anNiuQiShu(500)">500期</button>
				</uni-col>
				<uni-col :span="6">
					<button class="buttonthirty" @click="anNiuQiShu(1000)">1000期</button>
				</uni-col>
			</uni-row>
		</uni-section>

		<uni-row :gutter="30">
			<uni-col :span="8">
				<button class="zoshitu" @click="zoushitu">查看走势图</button>
			</uni-col>
			<uni-col :span="8">
				<button class="chakanjilu" @click="toRecord">查看记录</button>
			</uni-col>
			<uni-col :span="8">
				<button class="jisuanjieguo" @click="toResult">计算结果</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttonValue: 0, //组排值
				buttonName: '', // 按钮值
				childrenButtonName: '', // 子按钮名称
				state: false,
				args: {
					buttonArr: 0, //存储按钮下标
					qiShuFirst: 0, //存储第一个期数下标
					qiShuSecond: 0, //存储第二个期数下标
					qiShuIndex: 0, //存储下标  30期  100期  500期 1000期
					optionType: 0, //组合值
					optionName: '', // 组合名称
					projectName: '',
					type: '' // 项目类型
				},
				qiShu: [], //存储下拉框数据
				flag: false, //是否显示
				buttons02: [{
						//隐藏按钮的选中状态
						isState: true
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					}
				],
				button01Arr: [
					{
						//第一排按钮
						//3-0组排，3-0这个值不能重复
						button01Name: [{name: '百位/12345',no: 3},{name: '十位/12345',no: 1},{name: '个位/12345',no: 2},{name: '百十个位',no: 0}]
					},{
						//第二排按钮
						button01Name: [{name: "百位\\12345",no: 4},{name: '十位\\12345',no: 5},{name: '个位\\12345',no: 6},{name: '百十个位差',no: 7}]
					},{
						//第三排按钮
						button01Name: [{name: '百十差/12345	',no: 8},{name: '十个差/12345',no: 9},{name: '百个差/12345',no: 10},{name: '百十个位和',no: 11}]
					},{
						//第四排按钮
						button01Name: [{name: '百十差\\12345	',no: 12},{name: '十个差\\12345',no: 13},{name: '百个差\\12345',no: 14},{name: '小中大',no: 15}]
					},{
						//第五排按钮
						button01Name: [{name: '百十和/12345	',no: 16},{name: '十个和/12345',no: 17},{name: '百个和/12345',no: 18},{name: '小中大差',no: 19}]
					},{
						//第六排按钮
						button01Name: [{name: '百十和\\12345	',no: 20},{name: '十个和\\12345',no: 21},{name: '百个和\\12345',no: 22},{name: '小中大和 ',no: 23}]
					}, {
						//第七排按钮
						button01Name: [{name: '小号/12345',no: 24},{name: '中号/12345',no: 25},{name: '大号/12345',no: 26},{name: '组选通杀 ',no: 27}]
					}, {
						//第八排按钮
						button01Name: [{name: '小号\\12345',no: 28},{name: '中号\\12345',no: 29},{name: '大号\\12345',no: 30},{name: '振幅差 ',no: 31}]
					}, {
						//第九排按钮
						button01Name: [{name: '小中差/12345	',no: 32},{name: '中大差/12345',no: 33},{name: '小大差/12345',no: 34},{name: '振幅和 ',no: 35}]
					}, {
						//第十排按钮
						button01Name: [{name: '小中差\\12345	',no: 36},{name: '中大差\\12345',no: 37},{name: '小大差\\12345',no: 38},{name: '单选间隔',no: 66}] //,{name: '平均值 ',no: 39}
					}, {
						//第十一排按钮
						button01Name: [{name: '小中和/12345	',no: 40},{name: '中大和/12345',no: 41},{name: '小大和/12345',no: 42},{name: '和尾',no: 43}]
					}, {
						//第十二排按钮
						button01Name: [{name: '小中和\\12345	',no: 44},{name: '中大和\\12345',no: 45},{name: '小大和\\12345',no: 46}] //,{name: '散连对',no: 47}
					}, {
						//第十三排按钮
						button01Name: [{name: '0胆/12345	',no: 48},{name: '1胆/12345',no: 49},{name: '2胆/12345',no: 50},{name: '3胆/12345',no: 51}]
					}, {
						//第十四排按钮
						button01Name: [{name: '0胆\\12345	',no: 52},{name: '1胆\\12345',no: 53},{name: '2胆\\12345',no: 54},{name: '3胆\\12345',no: 55}]
					}, {
						//第十五排按钮
						button01Name: [{name: '4胆/12345	',no: 56},{name: '5胆/12345',no: 57},{name: '6胆/12345',no: 58},{name: '7胆/12345',no: 59}]
					}, {
						//第十六排按钮
						button01Name: [{name: '4胆\\12345	',no: 60},{name: '5胆\\12345',no: 61},{name: '6胆\\12345',no: 62},{name: '7胆\\12345',no: 63}]
					}, {
						//第十七排按钮
						button01Name: [{name: '8胆/12345	',no: 64},{name: '9胆/12345',no: 65}] //,{name: '三类分析',no: 67}
					}, {
						//第十八排按钮
						button01Name: [{name: '8胆\\12345	',no: 68},{name: '9胆\\12345',no: 69}] //,{name: '号码组合形态',no: 70},{name: '二类分析',no: 71}
					}, {
						//第十九排按钮
						button01Name: [{name: '差0胆/12345	',no: 72},{name: '差1胆/12345',no: 73},{name: '差2胆/12345',no: 74},{name: '差3胆/12345',no: 75}]
					}, {
						//第二十排按钮
						button01Name: [{name: '差0胆\\12345	',no: 76},{name: '差1胆\\12345',no: 77},{name: '差2胆\\12345',no: 78},{name: '差3胆\\12345',no: 79}]
					},{
						//第二十一排按钮
						button01Name: [{name: '差4胆/12345	',no: 80},{name: '差5胆/12345',no: 81},{name: '差6胆/12345',no: 82},{name: '差7胆/12345',no: 83}]
					},
					
					{
						//第二十二排按钮
						button01Name: [{name: '差4胆\\12345	',no: 84},{name: '差5胆\\12345',no: 85},{name: '差6胆\\12345',no: 86},{name: '差7胆\\12345',no: 87}]
					},
					
					{
						//第二十三排按钮
						button01Name: [{name: '差8胆/12345', no: 88},{name: '差9胆/12345', no: 89}] //, {name: '胆码组',no: 90}, {name: '两码组合',no: 91}
					},{
						//第二十四排按钮
						button01Name: [{name: '差8胆\\12345', no: 92},{name: '差9胆\\12345', no: 93}] //, {name: '排序', no: 94}, {name: '组合差',no: 95}
					}
				],
				//第一排到第六排按钮的选中状态
				buttons01: [{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: true
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					}, {
						isActive: false
					},
					{
						isActive: false
					}
				],
				firstNo:0,
				buttons01: [
						{
							isActive: false
						 },{
							isActive: false
						 },{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						}, 
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						}, 
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						}, 
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						}, 
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						}, 
						{
							isActive: false
						},
						{
							isActive: false
						},
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						} ,
						{
							isActive: false
						}  
					]
			};
		},
		onLoad(query) {
			this.args.projectName = query.name;
			this.args.type = query.type;

			uni.setNavigationBarTitle({
				title: this.args.projectName
			});
			this.selectList();
			this.changeType(3, '百位12345/');
		},
		methods: {
			toRecord(){ // 查看记录
				uni.navigateTo({
					url: '/pages/my/index/index?type='+this.args.type
				});
			},
			toResult(){ // 查看结果页面
				this.args.optionType = this.firstNo
				this.args.optionName = this.buttonName
				this.args.delFlag = 0
				uni.navigateTo({
					url: `/pages/lottery/software/selectionDetails?args=${JSON.stringify(this.args)}`
				});
			},
			//查询下拉框数据
			selectList() {
				let lotteryType = 'plw'
				if(this.args.type == 'plwa3'){
					lotteryType = 'plw'
				}else{
					lotteryType = this.args.type
				}
				this.$myRequest({
					method: 'GET',
					url: '/getLotteryNo',
					data:{type:lotteryType}
				}).then((res) => {
					this.qiShu = res.data;
				});
			},
			changeFirst(e) {
				//第一个下拉框选中数据的vaule值
				if (this.args.qiShuSecond !== 0) {
					if (e > this.args.qiShuSecond) {
						uni.showToast({
							title: '起始期数不能大于结束期数！'
						});
					}
					return;
				}
				this.args.qiShuFirst = e;
			},
			changeSecond(i) {
				//第二个下拉框选中数据的vaule值
				if (this.args.qiShuFirst > i) {
					uni.showToast({
						title: '起始期数不能大于结束期数！'
					});
					return;
				}
				this.args.qiShuSecond = i;
			},
			anNiuQiShu(o) {
				//30期 100期 500期 1000期 下标
				this.state = false;
				this.args.qiShuIndex = o;
			},
			ziDingYiQiShu() {
				// 这里是确定期数的按钮
				if (this.args.qiShuFirst > this.args.qiShuSecond) {
					uni.showToast({
						title: '起始期数不能大于结束期数！'
					});
					return;
				}
				this.state = true;
			},
			zoushitu() {
				if (this.state) {
					this.args.qiShuIndex = 0;
				} else {
					this.args.qiShuFirst = 0;
					this.args.qiShuSecond = 0;
				}
				if (this.flag) {
					this.buttonValue = this.buttonValue;
				} else {
					this.buttonValue = '';
				}
				this.args.optionType = this.firstNo
				this.args.optionName = this.buttonName
				//查看走势图 跳转页面
				uni.navigateTo({
					url: '/pages/trendChart/trendChart?args=' + JSON.stringify(this.args)
				});
			},
			//隐藏按钮的选中状态
			changeButtons(res, name) {
				this.buttons02 = [{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					},
					{
						isState: false
					}
				];
				this.buttons02[res].isState = true;
				//获取值
				this.buttonValue = res;
				this.childrenButtonName = name;
			},
			changeType(type, name) {
				this.buttons01 = [
					 {
					 	isActive: false
					  },{
					 	isActive: false
					  },{
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 }, 
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 }, 
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 }, 
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 }, 
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 }, 
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 },
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 } ,
					 {
					 	isActive: false
					 }  
				];
				this.buttons01[type].isActive = true;
				//this.changeFlag(type)
				this.args.buttonArr = type;
				this.buttonName = name;
				this.firstNo = type;
				this.childrenButtonName = '';
				// if (type == 0) {
				// 	this.flag = true;
				// 	this.changeButtons(0, '');
				// } else {
				// 	this.flag = false;
				// }
			}
		}
	};
</script>

<style>
	uni-button {
		font-size: 10px !important;
		width: 90px;
	}

	.buttonActive01 {
		/* border-radius: 100px; */
		background-color: #742305;
		/* 鼠标悬停时的背景颜色 */
		color: white;
	}

	.buttonNoActive01 {
		background-color: white;
		/* width: 200rpx; */
		/* border-radius: 10%; */
	}

	.buttonActive02 {
		/* border-radius: 100px; */
		background-color: #742305;
		/* 鼠标悬停时的背景颜色 */
		color: white;
	}

	.buttonNoActive02 {
		background-color: white;
		/* width: 200rpx; */
		/* border-radius: 10%; */
	}

	.zoshitu {
		background-color: #742305;
		color: white;
		width: 90%;
		margin-bottom: 20px;
	}

	.chakanjilu {
		background-color: #742305;
		color: white;
		width: 90%;
	}

	.jisuanjieguo {
		background-color: #742305;
		color: white;
		width: 90%;
	}

	.biaoti {
		text-align: center;
		height: 140px;
		margin-bottom: 50px;
	}

	.uni-row {
		margin-bottom: 10px;
	}

	.input01 {
		width: 100px;
	}

	.zidingyi {
		margin-top: 8px;
		font-size: 8px;
	}

	.fuhao {
		margin-top: 8px;
	}

	.buttonthirty {
		width: 70px;
	}

	.buttonthirty:hover {
		background-color: #742305;
		color: white;
	}
</style>